<script setup>
import { onMounted, reactive, ref, toRefs } from 'vue';
import Pagination from '@/components/Pagination/index.vue';

import { queryOmsMallPcbaBomMatchCoordinateList } from '@/server/api/biz.js';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  fileInfo: {
    type: Object,
    default: () => {},
  },
  isConfirm: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(['update:modelValue', 'close', 'confirm']);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    orderNo: undefined,
  },
});

const list = ref([]); // 已下单订单列表
const total = ref(0);
const { queryParams } = toRefs(data);

onMounted(() => {
  getList();
});

// 关闭弹窗
const onClose = () => {
  emits('update:modelValue', false);
};

/**
 * 获取已下单订单列表
 */
const getList = async () => {
  const res = await queryOmsMallPcbaBomMatchCoordinateList({
    customerFileId: props.fileInfo.fileId,
    ...data.queryParams,
  });
  if (res.code === 200) {
    list.value = res.data.list;
    total.value = res.data.totalRow;
  } else {
    ElMessage.error(res.msg);
  }
};

/**
 * 确认选择
 */
const handleConfirm = () => {
  emits('confirm');
  emits('close');
};
</script>

<template>
  <el-dialog
    v-model="props.modelValue"
    :title="$t('mall.package_solder_point_confirmation')"
    center
    :close-on-click-modal="false"
  >
    <el-table :data="list" border style="width: 100%" tooltip-effect="dark">
      <el-table-column prop="footprint" :label="$t('mall.package')" width="180" />
      <el-table-column
        show-overflow-tooltip
        prop="designator"
        :label="$t('mall.position_number')"
      />
      <el-table-column prop="designatorNumber" :label="$t('mall.component_quantity')" width="180" />
      <el-table-column prop="machiningNumber" :label="$t('mall.solder_point_count')" width="180" />
    </el-table>
    <el-row type="flex" justify="end">
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-row>

    <template #footer>
      <span class="dialog-footer">
        <el-button palin @click="onClose">{{ $t('smt.Cancel') }}</el-button>
        <el-button v-if="!props.isConfirm" type="primary" @click="handleConfirm()">
          {{ $t('mall.confirm') }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scope>
.el-popper {
  max-width: 20% !important;
}

.icon {
  cursor: pointer;
}
</style>
